<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--引入BootsStrap样式-->
<link rel="stylesheet" type="text/css"
      th:href="@{/bootstrap/css/bootstrap.css}">
<!--引入时间控件-->
<link rel="stylesheet" type="text/css"
      th:href="@{/bootstrap/css/datetimepicker.min.css}">
<!--引入js文件-->
<script th:src="@{/bootstrap/js/jquery.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/bootstrap/js/moment-with-locales.js}"></script>
<script th:src="@{/bootstrap/js/datetimepicker.min.js}"></script>

<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
</head>
<body>
<div>
    <div class="row" style="text-align: center;margin: 50px auto;width: 75%;">
        <div class="col-md-12">
        <div class="col-md-3">
<!--            <div style="text-align: center;background-color: #1a75ce;width: 200px;">
            <h2 style="
            color: #ffffff;
            font-weight: bold;
            border-radius: 0;">水利资讯</h2>
            </div>-->
        </div>
            <div class="col-md-8">
            <div class="form-inline">
                <div style="float: left;margin-left: -80px;margin-bottom: 20px;">
                    <label for="exampleInputName2">发布时间</label>
                    <input autocomplete="off" type="text" id="startTime" name="startTime" class="form-control"
                           placeholder="开始时间" style="width: 25%">到
                    <input autocomplete="off" type="text" id="endTime" name="endTime" class="form-control"
                           placeholder="截至时间" style="width: 25%">
                </div>
                <div style="float: right;">
                    <input type="text" autocomplete="off" class="form-control" id="newsTitle" name="newsTitle"
                           placeholder="新闻标题"
                           onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                           onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                           oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">
                    <button type="button" class="btn btn-default" onclick="formSubmit()">提交</button>
                </div>
            </div>
            </div>
        </div>
        <div class="col-md-12" style="background: #fff !important;">
            <div id="first" th:fragment="first">
                <div class="col-md-3">
                    <div class="list-group" style="width: 230px;">
                        <ul>
                            <button class="list-group-item" onclick="formSubmit()"
                                    th:text="'全部'+'('+${count}+')'"></button>
                        </ul>
                        <ul th:each="newsType:${type}">
                            <button class="list-group-item" th:onclick="newsTypeClick([[${newsType.id}]]);"
                                    th:text="${newsType.name}+'('+${newsType.count}+')'"></button>

                        </ul>
                    </div>
                </div>
                <div class="col-md-8">
                    <table class="table table-hover checkbox-table" style="table-layout: fixed;">
                        <tr th:each="news:${page.getRecords()}" class="up-row">
                            <h4 style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align: left"> <a
                                    th:href="${news.detailUrl}"
                                    target="_blank">
                                <span th:text="${news.newsNm}" th:alt-title="${news.newsNm}"></span> </a></h4>
                           <!-- <td th:text="${newsStat.index+1}" style="width: 10px;"></td>-->
                            <span th:text="'信息来源：'+${news.newsRsn}" style="float: left;"></span>
                            <span th:text="'发布时间：'+${#dates.format(news.pubDate, 'yyyy.MM.dd')}" style="float: right;"></span>
                                <h5 class="page-header"></h5>
                          <!--  <th style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><a
                                    th:href="${news.detailUrl}"
                                    target="_blank"> <span
                                    th:text="${news.newsNm}"></span> </a></th>-->
                            <!--<th th:text="${news.newsRsn}"></th>
                            <th th:text="${#dates.format(news.pubDate, 'yyyy.MM.dd')}"></th>-->
                        </tr>
                        </tbody>
                    </table>
                    <p class="text-left">
                        <span class="help-block">当前为第</span>
                        <span th:text="${page.getCurrent()}" class="help-block" style=""></span>
                        <span class="help-block">页，总</span>
                        <span th:text="${page.getPages()}" class="help-block"></span>
                        <span class="help-block">页，共</span>
                        <span th:text="${page.getTotal()}" class="help-block"></span>
                        <!--<span class="help-block">条记录，每页显示</span>

                        <select id="changePageSize" th:onchange="changePageSize()"
                                style="border: 1px solid #ccc;border-radius: 4px;padding: 6px 6px;">
                            <option th:text="${page.getSize()}"></option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                        </select>
                        <span class="help-block">条</span>-->
                    </p>
                    <p class="text-right" style="margin-top: -30px;">
                        <a href="javascript:void(0)" onclick="formSubmit()">首页</a>
                        <!--th:href="@{/index(current=${page.hasPrevious()}?${page.getCurrent()-1}:1,size=${page.getSize()})}"-->
                        <a href="javascript:void(0)" th:onclick="previousPage([[${page}]])">上一页</a>
                        <a href="javascript:void(0)" th:onclick="nextPage([[${page}]])">下一页</a>
                        <a href="javascript:void(0)" th:onclick="finalPage([[${page.getPages()}]])">尾页</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var type = 0;

    // 获取搜索框内容
    function getSerch() {
        var startTime = $('#startTime').val();
        var endTime = $('#startTime').val();
        var newsTitle = $('#startTime').val();

    }

    //日期时间范围
    $("#startTime").datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn')
    });
    $("#endTime").datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn')
    });

    // 搜索，首页，全部
    function formSubmit() {
        //全部
        var type = 999;
        getSerch();
        $('#first').load("/selectType?type=" + type + "&startTime=" + startTime.value + "&endTime=" + endTime.value +
            "&newsTitle=" + newsTitle.value);
        localStorage.setItem("type", type);
    }

    $(document).ready(function () {
        $('#changePageSize').val($("#changePageSize option:selected").val())
    });

    // 点击下拉菜单选择条数
    /*function changePageSize() {
        //获取下拉框的值
        const pageSize = $("#changePageSize option:selected").val();
        //向服务器发送请求，改变没页显示条数
        /!*location.href = "/index?page=1&size=" + pageSize;*!/
        // 如果type值丢了 此处从localStorage 取值；
        // 如何丢值 ：当用户点击尾页或者是其他的操作 type 就丢了，因为在只是在点击左侧栏目时赋值
        if (type == null || type == 0) {
            type = localStorage.getItem("type");
        }
        $('#first').load("/redirectPage?type="+type+"&page="+1+"&size="+pageSize);
        // 此处保存新闻类型和每页显示条数
        localStorage.setItem("type",type);
        localStorage.setItem("size",pageSize);
    }*/



    //末页
    function finalPage(t) {
        type = localStorage.getItem("type");
        if (type == null) {
            type = 999;
        }
        getSerch();
        // 同理获取size,即每页显示的条数
        const size = localStorage.getItem("size");
        /*herf 请求多个参数形式为：xx?parm1=zs&parm2=18 */
        $('#first').load("/selectType?type=" + type + "&current=" + t + "&startTime=" + startTime.value + "&endTime=" +
            endTime.value +
            "&newsTitle=" + newsTitle.value);
        localStorage.setItem("type", type);
    }

    // 点击左侧的某一项
    function newsTypeClick(t) {
        getSerch();
        $('#first').load("/selectType?type=" + t + "&startTime=" + startTime.value + "&endTime=" + endTime.value +
            "&newsTitle=" + newsTitle.value);
        type = t;
        localStorage.setItem("type", t);
        /* $.ajax({
             type:"post",
             //dataType:"json",
             contentType:"application/json",
             async:true,
             url:"/selectType",
             data:JSON.stringify({"type":types}),
             success:function (result) {
                 console.log(1111)
             }
         });*/
        // window.location.href="/selectType?type="+t;
    }

    // 上一页
    function previousPage(page) {
        if (page.current > 1) {
            // 先判断type,不存在就从localStorage 获取
            if (type == null || type == 0) {
                type = localStorage.getItem("type");
            }
            const current = localStorage.getItem("current");
            getSerch();
            $('#first').load("/selectType?type=" + type + "&current=" + (page.current - 1) + "&size=" + page.size +
                "&startTime=" + startTime.value + "&endTime=" + endTime.value +
                "&newsTitle=" + newsTitle.value);
            localStorage.setItem("current", (page.current - 1));
        } else {
            alert("已经是第一页了")
        }
    }

    // 下一页
    function nextPage(page) {
        if (page.current < page.pages) {
            // 先判断type,不存在就从localStorage 获取
            type = localStorage.getItem("type");
            if (type == null) {
                type = 999;
            }
            const current = localStorage.getItem("current");
            getSerch();
            $('#first').load("/selectType?type=" + type + "&current=" + (page.current + 1) + "&size=" + page.size +
                "&startTime=" + startTime.value + "&endTime=" + endTime.value +
                "&newsTitle=" + newsTitle.value);
            localStorage.setItem("current", (current + 1));
            localStorage.setItem("type", type);
        } else {
            alert("已经是最后一页了！")
        }
    }
</script>
<style>
    a {
        text-decoration-line: none !important;
    }

    .help-block {
        display: inline !important;
    }
    .page-header {
         padding-bottom: 25px;
         margin: 0px;
        border-bottom: 1px solid #eee;
    }
    ul, ol {
        margin-top: 5px;
        margin-bottom: 8px;
    }
    h4, .h4 {
        font-size: 18px;
        margin-top: 7px;
        margin-bottom: 9px;
        color: #005293
    }
    body {
        width: 100%;
        min-width: 1200px;
        font-family: 'govwf_fzzhunysk_ys_2253418400';
/*        letter-spacing:0.2px;*/
    }
</style>
</html>
